<template>
  <div id="app">
    <img src="./assets/logo.png" alt="">
    <router-view/>
  </div>
  <template>
    <div>
      <h1>学生管理系统</h1>
      <button @click="getAllStudents">查询所有学生</button>
      <button @click="addStudent">添加学生</button>
      <input v-model="searchId" placeholder="输入 ID 查询">
      <button @click="getStudentById">根据 ID 查询</button>
      <input v-model="updateId" placeholder="输入 ID 修改">
      <button @click="updateStudent">修改学生信息</button>
      <input v-model="deleteId" placeholder="输入 ID 删除">
      <button @click="deleteStudent">删除学生</button>

      <table v-if="students.length > 0">
        <thead>
        <tr>
          <th>ID</th>
          <th>学号</th>
          <th>姓名</th>
          <th>班级</th>
          <th>电话</th>
          <th>QQ</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.student_id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.classname }}</td>
          <td>{{ student.telephone }}</td>
          <td>{{ student.qq }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </template>

  <script setup>
    import { ref } from 'vue';
    import axios from 'axios';

    const students = ref([]);
    const searchId = ref('');
    const updateId = ref('');
    const deleteId = ref('');
    
    const getAllStudents = async () => {
      try {
        const response = await axios.get('http://localhost:8080/api/students');
        students.value = response.data;
      } catch (error) {
        console.error(error);
      }
    };
    
    const getStudentById = async () => {
      try {
        const response = await axios.get(`http://localhost:8080/api/students/${searchId.value}`);
        students.value = [response.data];
      } catch (error) {
        console.error(error);
      }
    };
    
    const addStudent = async () => {
      try {
        const newStudent = {
          student_id: 123456789012,
          name: '张三',
          classname: '一班',
          telephone: 13800138000,
          qq: 123456789
        };
        const response = await axios.post('http://localhost:8080/api/students', newStudent);
        students.value.push(response.data);
      } catch (error) {
        console.error(error);
      }
    };


    const updateStudent = async () => {
      try {
        const updatedStudent = {
          student_id: 123456789012,
          name: '李四',
          classname: '二班',
          telephone: 13900139000,
          qq: 987654321
        };
        const response = await axios.put(`http://localhost:8080/api/students/${updateId.value}`, updatedStudent);
        const index = students.value.findIndex(student => student.id === parseInt(updateId.value));
        if (index !== -1) {
          students.value[index] = response.data;
        }
      } catch (error) {
        console.error(error);
      }
    };
    
    const deleteStudent = async () => {
      try {
        await axios.delete(`http://localhost:8080/api/students/${deleteId.value}`);
        students.value = students.value.filter(student => student.id !== parseInt(deleteId.value));
      } catch (error) {
        console.error(error);
      }
    };
  </script>

  <style scoped>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }
  </style>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
